<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>post1-koa</title>
    <script src="https://cdn.staticfile.org/axios/0.19.2/axios.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.6.11/vue.min.js"></script>

</head>
<body>
<div id="case8-demo2">
    <img src="/timg.jpg" height="852" width="720"/>
    <form>
        <input type="text" name="userName" placeholder="请输入用户名" v-model="userName" >
    </form>
    <form>
        <input type="text" name="password" placeholder="请输入密码" v-model="password">
    </form>
    <button v-on:click="sendPost">发送post请求</button>
    <button v-on:click="sendGet">发送get请求</button>
</div>
<script type="text/javascript">
    var case8Demo2=new Vue({
        el:"#case8-demo2",
        data:{
            userName:"",
            password:""
        },
        methods:{
            sendPost: function (){
                axios
                .post("http://localhost:3000/tologin",{
                    username: this.userName,
                    password: this.password
                })
                .then((response)=>(
                    console.log(response.data),
                    console.log("==="+this.userName+"==="+this.password)))
                .catch((error)=>{
                    console.log(error)
                })
            },
            sendGet:function () {
                axios
                 .get("http://localhost:3000/login", {
                     params:{
                         username: this.userName,
                         password: this.password
                     }
                    })
                 .then((response)=>(
                     console.log(response.data),
                     console.log("==="+this.userName+"==="+this.password)))
                 .catch((error)=>{
                     console.log(error)
                  })
            }
            }
    })
</script>
</body>
</html>